<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>lucky-lottery</title>
    <link rel="stylesheet" type="text/css" 
    href="css/bootstrap.min.css" crossorigin="anonymous"/>
    <style>
      body {
        background-image:  url('images/bg-1.jpg') ;
        background-size: cover;
        background-repeat: no-repeat;
        color: orange;
      }
      .container {
        width: 1500px;;
      }
      .title{
          text-align: center;
          margin: 30px 0;
          content: ' ';
          font-family:楷体; 
          margin-top:80px;
      }
      .sub-title {
          text-align: center;
          font-family:楷体;
          margin-top:60px;
      }
      .reward {
          text-align: center;
          height:40px;
          line-height: 50px;
          margin-top:10px;
      }
      .timer {
          text-align: center;
          height:30px;
          line-height: 30px;
      }

      .start-text {
        font-size:40px;
        line-height: 40px;
        color: orange;
        font-family:微软雅黑;
      }
      .reward-pepole {
        margin:auto;
        text-align: center;
        font-size: 16px;
        line-height: 30px;
        margin-top: 24px !important;
      }

      .col-12 {
        font-size:64px;
        line-height: 60px;
        color: white;
        font-weight: 500;
        font-family:微软雅黑;
      }

      .col-6 {
        font-size:36px;
        line-height: 50px;
        text-align: center;
        color: white;
        font-weight: 500;
        font-family:微软雅黑;
      }

      .col-4 {
        font-size:28px;
        line-height: 30px;
        color: white;
        font-weight: 600;
        font-family:微软雅黑;
      }


      .col-3 {
        font-size:20px;
        line-height: 30px;
        text-align: left;
        color: white;
        font-weight: 600;
        font-family:微软雅黑;
      }

      .col-2 {
        font-size:20px;
        line-height: 25px;
        text-align: left;
        color: white;
        font-weight: 900;
        font-family:微软雅黑;
      }

      .col-1 {
        font-size:20px;
        line-height: 25px;
        text-align: left;
        color: black;
        font-weight: 900;
        font-family:微软雅黑;
      }

      .button{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 87%;
        margin: -50px 0 0 -50px;
      }

      .button1{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 60%;
        top: 87%;
        margin: -50px 0 0 -50px;
      }

      .button2{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 40%;
        top: 87%;
        margin: -50px 0 0 -50px;
      }

      .start-button {
        font-size: 30px;
        text-align: center;
        color: #000;
        font-weight: 900;
        font-family:微软雅黑;
      
      }

      .text {
        font-size:10px;
        line-height: 40px;
        color: rgb(255, 255, 255);
        font-family:微软雅黑;
      }

      .info{
        width: 350px;
        height: 100px;
        position: absolute;
        left: 43%;
        top: 95%;
        margin: -50px 0 0 -50px;
      }


      .start-button1 {
        font-size: 30px;
        text-align: center;
        color: #fdd312;
        font-weight: 900;
        font-family:楷体;
      
      }

      @keyframes timer
      {
        from {
          font-size: 24px;
        }
        to {
          font-size: 100px;
        }
      }
    </style>
  </head>
    <div class="container">
      <div class="row">
        <h2 class="title"></h2>
        <h1 class="sub-title"></h1>
      </div>
    <div class="container">
      <h2 class="reward"></h2>
      <div id="reward-area" class="reward-pepole row">
        <div class="col-md-12 col-12">
          <h1 class="text">.</h1>
        </div>
      </div>
    </div>
    <div class="button2">
      <h1 class="start-button">
        <button type="button" class="btn btn-danger btn-lg" onclick="startRolling()">开始抽奖</button>
      </h1>
    </div>
    <div class="button">
      <h1 class="start-button">
        <button type="button" class="btn btn-danger btn-lg" onclick="stopRolling()">停止抽奖</button>
      </h1>
    </div>
    <div class="button1">
      <h1 class="start-button">
        <button type="button" class="btn btn-danger btn-lg" onclick="nextRewarding()">进行抽奖</button>
      </h1>
    </div>

    <!-- <div aria-disabled="isdisable">
      <div>奖项名称：<input type="text" name="cimName"></div>
      <div>抽奖人数: <input type="text" name="cimQty"></div>
      <div><button onclick="change(cimName,cimQty)">开始抽奖</button></div>
    </div> -->
    <div class="info">
      <h1 class="start-button1">
        技术支持：数字化平台
      </h1>
    </div>
  <body>
    <script src="index.js"></script>
  </body>
</html>